<template>
  <div class="edit-shop-base-wrap">
    <div class="header flex-c">
      <p class="title">基础信息</p>
      <a-button size="mini" style="margin-right: 20px" @click="reset">重置</a-button>
      <a-button type="primary" size="mini" @click="saveShop" :loading="summitLoading">保存</a-button>
    </div>
    <a-form :model="formInfo" ref="shopFormRef" :rules="rules">
      <a-row :gutter="16">
        <a-col :span="11">
          <a-form-item label="SellerId：" label-col-flex="130px">
            <p>{{ formInfo.sellerId }}</p>
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item label="地区：" label-col-flex="130px">
            <p>{{ formInfo.region }}</p>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="11">
          <a-form-item field="shopName" label="店铺名称：" label-col-flex="130px">
            <a-input v-model="formInfo.shopName" placeholder="请输入店铺名称" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item label="品牌：" label-col-flex="130px">
            <a-select v-model="shopBrandParams" placeholder="选择品牌" multiple value-key="code" allow-search allow-clear>
              <a-option v-for="(brand, i) in brandList" :key="i" :value="brand" :label="brand.name" />
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="11">
          <a-form-item field="shopMasterIds" label="店长：" label-col-flex="130px">
            <a-select v-model="formInfo.shopMasterIds" placeholder="选择店长" allow-search allow-clear>
              <a-option v-for="(user, i) in userList" :key="i" :value="user.id" :label="user.userName" />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item label="基础API授权：" label-col-flex="130px">
            {{ baseAuthMap[formInfo.baseAuth] }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="11">
          <a-form-item label="创建时间：" label-col-flex="130px">
            <p>{{ $setTime(formInfo.gmtCreate) }}</p>
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item label="授权时间：" label-col-flex="130px">
            <p>{{ $setTime(formInfo.gmtBaseAuth) }}</p>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { getBrandList } from '@/api/product'
  import { updateShopBase, getShopInfo } from '@/api/system'
  import { Message } from '@arco-design/web-vue'
  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
    userList: {
      type: Array,
      default: () => [],
    },
  })
  onMounted(async () => {
    getAllBrandList()
    setFormInfo(props.currentData)
  })
  const formInfo: any = ref({})
  let defaultInfo: any = JSON.parse(JSON.stringify(props.currentData))
  const brandList = ref<Array<any>>([])
  const shopBrandParams = ref<Array<any>>([])
  const shopFormRef = ref()
  const summitLoading = ref(false)
  const baseAuthMap = {
    '0': '未授权',
    '1': '已授权',
    '-1': '授权异常',
  }
  const rules = ref({
    shopName: [{ required: true, message: '请输入店铺名称' }],
    shopMasterIds: [{ required: true, message: '请选择店长' }],
  })
  function setFormInfo(currentData: any) {
    formInfo.value = JSON.parse(JSON.stringify(currentData))
    shopBrandParams.value = formInfo.value.shopBrands?.map((el: any) => {
      return {
        code: el.brandCode,
        id: el.brandId,
        name: el.brandName,
      }
    })
    formInfo.value.shopMasterIds = formInfo.value.shopMasters?.[0]?.userId
  }
  // 获取所有品牌列表
  async function getAllBrandList() {
    const res: any = await getBrandList({
      pageNum: 1,
      pageSize: 1000,
    })
    brandList.value = res?.data?.records || []
  }
  // 获取店铺详情
  async function getShopDetail() {
    const res: any = await getShopInfo({
      id: formInfo.value.id,
    })
    defaultInfo = res?.data || {}
    setFormInfo(defaultInfo)
  }
  // 重置信息
  function reset() {
    setFormInfo(defaultInfo)
  }
  // 提交店铺信息
  async function saveShop() {
    let valid = await shopFormRef.value.validate((valid: any) => {
      return valid
    })
    if (valid) return
    let brandList = shopBrandParams.value.map((el) => {
      return {
        brandCode: el.code,
        brandName: el.name,
        brandId: el.id,
      }
    })
    let params = {
      shopMasterIds: [formInfo.value.shopMasterIds],
      shopName: formInfo.value.shopName,
      shopBrandParams: brandList,
      idList: [formInfo.value.id],
    }
    summitLoading.value = true
    const res: any = await updateShopBase(params)
    summitLoading.value = false
    if (res) {
      Message.success('保存成功！')
      getShopDetail()
    }
  }
</script>
<style lang="less" scoped>
  .header {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
    border-left: 3px solid rgba(var(--primary-6), 0.5);
    padding-left: 10px;
    .title {
      margin-right: 30px;
      width: 90px;
    }
  }
  .arco-form-item {
    margin-bottom: 10px;
  }
  :deep(.arco-form-item-label-col) {
    padding-right: 5px;
  }
</style>
